<template>
		<view @click="clickM">
			<block v-if="m_type == 'setting' || m_type == 'normal'">
				<view v-if="selected" class="rb-menu-selected">
					{{title != null && title.length > 0 ? title : '标题'}}
				</view>
				<view v-if="!selected && !scene_selected" class="rb-menu">
					{{title != null && title.length > 0 ? title : '标题'}}
				</view>
				<view v-if="!selected && scene_selected" class="rb-menu scene">
					{{title != null && title.length > 0 ? title : '标题'}}
				</view>
			</block> 
			<view v-if="m_type == 'add'" class="rb-menu">
				+
			</view>
			<view v-if="show_star" class="star">
				*
			</view>
			<block v-if="m_type == 'link'">
				<view v-if="selected" class="rb-menu-selected">
					<view class="l-title">
						{{title != null && title.length > 0 ? title : '标题'}}
					</view>
					<view :class="'link-status status-' + link_status"></view>
				</view>
				<view v-else class="rb-menu">
					<view class="l-title">
						{{title != null && title.length > 0 ? title : '标题'}}
					</view>
					<view :class="'link-status status-' + link_status"></view>
				</view>
			</block> 
		</view>
</template>

<script>
	export default {
		name:"rb-menu",
		props: {
			m_type: {
				type: String,
				default: 'normal' // normal add setting scene
			},
			selected: {
				type: Boolean,
				default: false
			},
			scene_selected: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '标题'
			},
			show_star: {
				type: Boolean,
				default: false
			},
			link_status: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			
			clickM() {
				if (this.selected) return
				this.$emit('click')
			}
		}
	}
</script>

<style scoped>

	.rb-menu {
		background-color: #1e1e26;
		padding: 5px 10px;
		color: #73738f;
		font-size: 15px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		display: flex;
		align-items: center;
	}
	
	.rb-menu:hover {
		cursor: pointer;
		color: #8585a6;
		background-color: #25252f;
	}

	.rb-menu-selected {
		background-color: #272730;
		padding: 7px 13px;
		color: #73738f;
		font-size: 15px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border-left-color: #73738f;
		border-left-width: 1px;
		border-left-style: solid;
		border-top-color: #73738f;
		border-top-width: 1px;
		border-top-style: solid;
		border-right-color: #73738f;
		border-right-width: 1px;
		border-right-style: solid;
		box-sizing: content-box;
		display: flex;
		align-items: center;
	}
	
	.scene {

		border-left-color: #fc2a75;
		border-left-width: 1px;
		border-left-style: solid;
		border-top-color: #fc2a75;
		border-top-width: 1px;
		border-top-style: solid;
		border-right-color: #fc2a75;
		border-right-width: 1px;
		border-right-style: solid;
		box-sizing: content-box;
	}
	
	.star {
		color: red;
		position: absolute;
		right: 2px;
		top: 0;
	}
	
	.link-status {
		width: 10px;
		height: 10px;
		border-radius: 100%;
		margin-left: 5px;
	}
	
	.status-0 {
		background-color: #515151;
	}
	
	.status-1 {
		background-color: #fc0004;
	}
	
	.status-2 {
		background-color: #fcaf29;
	}
	
	.status-3 {
		background-color: #2ffc0f;
	}

</style>